<!--
 * @Author: lijing
 * @e-mail: 1413979079@qq.com
 * @LastEditors: lijing
 * @Date: 2019-10-14 16:13:04
 * @LastEditTime: 2020-03-21 15:17:47
 * @FilePath: \blog-pages\src\components\HotArticles.vue
 * @Description: 热门文章组件
 -->

<template>
  <div>
    <b-card class="card" v-for="(article,index) in articles" :key="article.id">
      <div class="title">
        <b-badge class="badge">{{index+1}}</b-badge>
        <b-link :to="'/articleDetails/' + article.id">{{article.title}}</b-link>
      </div>
      <b-card-text class="small text-muted">
        <b-badge variant="info">{{article.type==1 ? '原创' : '转载'}}</b-badge>
        &nbsp;&nbsp;作者：{{article.author}}&nbsp;&nbsp;分类：{{article.category}}
      </b-card-text>
      <b-card-text>{{article.tabloid}}</b-card-text>
      <b-card-text class="small text-muted">
        <b-icon icon="calendar" font-scale="1.3"></b-icon>
        {{article.gmtUpdate}}
        <b-icon icon="eye" font-scale="1.3"></b-icon>
        {{article.views}}
        <b-icon icon="chat" font-scale="1.3"></b-icon>
        {{article.comments}}
        <div class="tag-box">
          <b-link class="tag" variant="info" v-for="(tag,index) in article.tags" :key="index">
            <i class="icon iconfont icon-tag"></i>
            {{tag}}
          </b-link>
        </div>
      </b-card-text>
    </b-card>
  </div>
</template>

<script>
import url from "@/request/url";
export default {
  name: "HotArticles",
  data() {
    return {
      articles: []
    };
  },
  created() {
    this.$axios
      .get(url.comm.hotArticles)
      .then(res => (this.articles = res.data));
  }
};
</script>

<style  scoped>
.card {
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
}
.header-text {
  font-size: 16px;
  font-weight: bold;
  color: #535353ad;
}
.title {
  font-size: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.badge {
  margin-right: 5px;
}
.tag-box {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  float: right;
}
.tag {
  text-decoration: none;
  margin-right: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
</style>
